@use "sass:math";

@use "../../colors";
@use "../../frameless";

.card {
    border-radius: math.div(8px, frameless.$em);
    box-shadow: 0 0 0 .125rem colors.$active-gray;
    background-color: colors.$ui-white;

    .card-button {
        display: block;
        border-radius: .5rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        box-shadow: none;
        background-color: colors.$ui-aqua;
        width: 23.75rem;
        height: 4rem;

        &:hover {
            box-shadow: none;
        }
    }

    .form {
        padding: 3rem 4rem;

        .card-button {
            margin: 0 0 -3rem -4rem;
        }

        .row {
            margin-bottom: 1.2rem;

            &.has-error {
                .input {
                    border: 1px solid colors.$ui-red-dark;
                }
            }

            .col-sm-9 {
                position: relative;
            }
        }
    }
}

@media #{frameless.$small} {
    .card {
        width: 22.5rem;

        .form {
            text-align: left;

            .button {
                width: 22.5rem;
            }
        }
    }
}

@media #{frameless.$medium-and-smaller} {
    .card {
        .input {
            width: 90%;
        }
    }
}
